import { defineStore } from 'pinia';
// useUserInfo 返回的函数统一使用useXXX作为命名方案，这是约定的规矩
// defineStore('userInfo',{..}) 在devtools 就使用 userInfo 这个名
/* defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，
第一个是 state，第二个是 getters，第三个是 actions
*/
export const useUserInfo = defineStore('userInfo', {
  // 相当于data
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
      counter: 10,
      name: 'pinia学习',
      num: 4,
      isLogin: false
    };
  },
  // 相当于计算属性
  getters: {
    doubleNum: (state) => {
      return state.num * 2;
    }
  },
  // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
  actions: {
    increment() {
      //this.是store实例
      this.counter++;
    },
    randomizeCounter(num) {
      setTimeout(() => {
        // this.是store实例
        this.counter = num;
      }, 0);
    }
  },

  // 配合pinia-plugin-persist插件 持久化 默认存储到 sessionStorage ，key 为 store 的 id
  persist: {
    enabled: true,
    strategies: [
      { storage: sessionStorage, paths: ['counter'] }, // counter字段用 sessionStorage 存储
      { storage: localStorage, paths: ['name'] } // name 字段用 localstorage 存储
    ]
  }
});
